import _extends from "@babel/runtime/helpers/esm/extends";
import {createNamespace, isDef} from '../utils';
import {ChildrenMixin} from '../mixins/relation';
import {routeProps} from '../utils/router';

var _createNamespace = createNamespace('tab'),
    createComponent = _createNamespace[0],
    bem = _createNamespace[1];

export default createComponent({
    mixins: [ChildrenMixin('vanTabs')],
    props: _extends({}, routeProps, {
        dot: Boolean,
        info: [Number, String],
        name: [Number, String],
        title: String,
        titleStyle: null,
        disabled: Boolean
    }),
    data: function data() {
        return {
            inited: false
        };
    },
    computed: {
        computedName: function computedName() {
            return isDef(this.name) ? this.name : this.index;
        },
        isActive: function isActive() {
            return this.computedName === this.parent.currentName;
        }
    },
    watch: {
        // eslint-disable-next-line object-shorthand
        'parent.currentIndex': function parentCurrentIndex() {
            this.inited = this.inited || this.isActive;
        },
        title: function title() {
            this.parent.setLine();
        },
        inited: function inited(val) {
            var _this = this;

            if (this.parent.lazyRender && val) {
                this.$nextTick(function () {
                    _this.parent.$emit('rendered', _this.computedName, _this.title);
                });
            }
        }
    },
    render: function render(h) {
        var slots = this.slots,
            parent = this.parent,
            isActive = this.isActive;
        var shouldRender = this.inited || parent.scrollspy || !parent.lazyRender;
        var show = parent.scrollspy || isActive;
        var Content = shouldRender ? slots() : h();

        if (parent.animated) {
            return h("div", {
                "attrs": {
                    "role": "tabpanel",
                    "aria-hidden": !isActive
                },
                "class": bem('pane-wrapper', {
                    inactive: !isActive
                })
            }, [h("div", {
                "class": bem('pane')
            }, [Content])]);
        }

        return h("div", {
            "directives": [{
                name: "show",
                value: show
            }],
            "attrs": {
                "role": "tabpanel"
            },
            "class": bem('pane')
        }, [Content]);
    }
});